<template>
  <a-card :bordered="false">
    <a-form layout="inline" :form="form" @submit="queryVipShareInfo">
      <a-form-item lable="手机号码">
        <a-input
          v-decorator="['tel',{ rules: [{ required: true, pattern: /^1[345678]\d{9}$/, message: '请输入正确的手机号码' } ], validateTrigger: 'blur' },]"
          placeholder="请输入手机号码">
        </a-input>
      </a-form-item>
      <a-form-item>
        <a-button type="primary" @click="queryVipShareInfo">
          查询
        </a-button>
      </a-form-item>
    </a-form>
    <a-card title="用户信息">
      <a-row :gutter="16" v-show="isShowShareInfo">
        <a-col :span="4">
          <a-card title="手机号码" :bordered="true">
            <p v-text="userInfo.tel"/>
          </a-card>
        </a-col>
        <a-col :span="4">
          <a-card title="用户ID" :bordered="true">
            <p v-text="userInfo.userId"/>
          </a-card>
        </a-col>
        <a-col :span="4">
          <a-card title="终身VIP开通时间" :bordered="true">
            <p v-text="userInfo.vipTime"/>
          </a-card>
        </a-col>
        <a-col :span="4">
          <a-card title="理论打卡天数" :bordered="true">
            <p v-text="userInfo.canShareDays"/>
          </a-card>
        </a-col>
        <a-col :span="4">
          <a-card title="实际打卡天数" :bordered="true">
            <p v-text="userInfo.shareDays"/>
          </a-card>
        </a-col>
      </a-row>
    </a-card>
    <a-card title="打卡详情">
      <a-list :grid="{ gutter: 16, column: 8 }" :data-source="shareInfo" v-show="isShowShareInfo">
        <a-list-item slot="renderItem" slot-scope="item">
          <a-popover title="任务详情" trigger="click">
            <div slot="content">
              <a-list size="small" bordered :data-source="taskInfo">
                <a-list-item slot="renderItem" slot-scope="taskItem">
                  于{{ taskItem.completeDate }}，完成({{ taskItem.taskType }}<a-divider type="vertical" />{{ taskItem.taskDetailType }})任务：{{ taskItem.taskCount }}次
                </a-list-item>
              </a-list>
            </div>
            <a title="点击查看任务详情"><a-tag :color="item.shared ? 'green':'red'" @click="queryShareTask(item.shareDate)">
              {{ item.shareDate }} {{ item.shared ? '已打卡':'未打卡' }}
            </a-tag></a>
          </a-popover>
        </a-list-item>
      </a-list>
    </a-card>
  </a-card>
</template>

<script>
  import { queryVipShareInfo, queryShareTask } from '@/api/koalaVipShare'
  import { Empty } from 'ant-design-vue';
  const defaultUserInfo = {
    tel: '',
    userId: '',
    vipTime: '暂未开通',
    canShareDays: '0',
    shareDays: '0'
  }
  export default {
      name: 'VipShareInfo',
      components: {
        Empty
      },
      data () {
        return {
          form: this.$form.createForm(this),
          userInfo: Object.assign({}, defaultUserInfo),
          isShowShareInfo: false,
          shareInfo: [],
          visible: false,
          taskInfo: []
        }
      },
      methods: {
        queryVipShareInfo: function () {
          const { form: { validateFields } } = this
          this.clearData();
          validateFields({ force: true }, (err, values) => {
            if (!err) {
              // 查询vip分享信息
              queryVipShareInfo(values).then(res => {
                if (res.data === null) {
                  this.isShowShareInfo = false
                } else {
                  this.isShowShareInfo = true
                  this.userInfo.userId = res.data.userId;
                  this.userInfo.tel = res.data.tel;
                  const userVipTime = res.data.userVipTime;
                  if (userVipTime === 'null' || userVipTime == null || userVipTime === 'undefined' || userVipTime === undefined || userVipTime === '') {
                    return;
                  }
                  this.userInfo.vipTime = userVipTime;
                  this.userInfo.canShareDays = res.data.canShareDays;
                  this.userInfo.shareDays = res.data.shareDays;
                  if (res.data.shareTimeLineList.length > 0) {
                    this.shareInfo = res.data.shareTimeLineList
                  }
                }
              })
            }
          })
        },
        clearData () {
          Object.assign(this.$data.userInfo, defaultUserInfo)
          this.shareInfo = [];
          this.isShowShareInfo = false;
        },
        queryShareTask: function (date) {
          console.log('queryShareTask', date)
          if (this.userInfo.userId === '' || this.userInfo.userId === undefined || this.userInfo.userId === 'undefined') {
            return;
          }
          queryShareTask(this.userInfo.userId, date).then(res => {
            this.taskInfo = res.data.everydayTaskInfoVos;
          })
        }
      }
    };
</script>
